import { settimeNth } from '../../../global/Func/settimeNth';
import { css_disnone } from '../Css';
import { element_attri_disableAniamtion } from '../Css/DataDefine/sourceData';
import { normalizeContainer } from './normalizeContainer';
import { packNode } from './packNode';
import { remove_class } from './remove_class';
import { seekElement_attribute } from './seek_element';

/**
 * 用于计算 时间的 隐藏元素
 */
let disnone_calc_El: HTMLElement;

const disnone_calc_id = 'disnone_calc';

/**
 * 给 元素 添加 一个动画 在动画结束后 移除 该 动画类
 * @param el 元素
 * @param animate 动画 类
 * @param delay 延时 后 在 添加 动画
 * @param lateDrop 动画 执行后 在 删除
 * @param hasCssVar 有 特定 的属性
 */
export function endsTimeAnimation(
  el: HTMLElement,
  animate: string,
  delay: number = 0,
  lateDrop: false | number = false,
  hasCssVar: boolean = false
) {
  if (getAnimaLocalStatus(el) == true) {
    remove_class(el, animate);
    return 0;
  }

  /**
   * 返回結果
   */
  let delayResult = 0;

  create_DisnoneEl_forCalculate_totalTime(el, hasCssVar, animate);

  /**
   * 当前 动画类 占用时间
   */
  let computedStyle = window.getComputedStyle(disnone_calc_El);

  let classDelay = eval(
    `${parseFloat(computedStyle.animationDuration.slice(0, -1))}+
    ${parseFloat(computedStyle.animationDelay.slice(0, -1))}`
  );

  //   console.log(classDelay);

  //移除 模拟计算的 class
  remove_class(disnone_calc_El, animate);

  delayResult = Number(delay) + Number(classDelay * 1000);

  /**
   * 自定义 的 延时 删除
   */
  if (lateDrop != false && lateDrop > 0) {
    delayResult += Number(lateDrop);
  }

  // 放置到 app 元素 之前
  if (hasCssVar) {
    let dom_app = normalizeContainer('app');

    packNode(document.body, disnone_calc_El, 'before', dom_app!);
  }

  // 延迟 添加 动画类
  settimeNth(delay, () => {
    remove_class(el, animate, true);
  });

  // 延迟 删除 动画类
  settimeNth(delayResult, () => {
    remove_class(el, animate);
  });

  return delayResult;
}

/**
 * 创建 一个 隐藏元素 为了 计算 相关的 动画时间
 */
function create_DisnoneEl_forCalculate_totalTime(
  el: HTMLElement,
  hasCssVar: boolean = false,
  animate: string
) {
  if (window.calcdomAnimateDelayEl == undefined) {
    disnone_calc_El = document.createElement('div');

    disnone_calc_El.id = disnone_calc_id;

    remove_class(disnone_calc_El, ['EndsTimeDIV', css_disnone], true);

    if (hasCssVar) {
      // 放置到 同源下 保证 css var 运行环境
      el.appendChild(disnone_calc_El);
    } else {
      let dom_app = normalizeContainer('app');

      packNode(document.body, disnone_calc_El, 'before', dom_app!);
    }

    window.calcdomAnimateDelayEl = disnone_calc_El;
  }

  remove_class(disnone_calc_El, animate, true);
}

/**
 * 检测 当前 元素 或 祖籍 元素 是否 设置 警用 自定义动画 效果
 * @param {HTMLElement} curEl 当前 元素
 */
export function getAnimaLocalStatus(curEl: HTMLElement) {
  let ancesEl = seekElement_attribute(curEl, element_attri_disableAniamtion);
  return ancesEl?.getAttribute(element_attri_disableAniamtion) == 'true';
}
